<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>手机线索转化</title>

  <link rel="stylesheet" href="/layui/css/layui.css">
  <link rel="stylesheet" href="/cusmanage/css/formSelects-v4.css">
  <link rel="stylesheet" href="/cusmanage/css/common.css">
  <link rel="stylesheet" href="/cusmanage/css/manager.css">
  <link rel="stylesheet" href="/hyqcss/public.css">
</head>
<body>

  <div class="layui-tab layui-tab-brief" lay-filter="">
    <ul class="public-header-nav">
      <li><a href="index.html">线索管理</a></li>
      <li><a class="public-header-nav-active" href="sea_clue.html">线索公海</a></li>
      <li><a href="clue_statistics.html">数据统计</a></li>
      <li><a href="setting_sea.html">设置</a></li>
    </ul>
  </div>
  <div class="layui-tab-content" style="padding: 0 16px;">
    <!-- 客户属性筛选 -->
    <div class="layui-tab-item layui-show">
      <div class="layui-tab layui-tab-brief" lay-filter="">
        <ul class="public-header-nav" style="margin: 0;">
          {loop $seas as $sea}
            <li><a {if ($seaId == $sea->id || $seaId == 0)}class="public-header-nav-active"{/if} href="sea_clue.html?seaId={$sea->id}">{$sea->name}</a></li>
          {/loop}
        </ul>
      </div>
      <!-- 筛选form -->
      <form class="layui-form client-filter" id="searchFrom">
        <div class="layui-inline">
          <label class="layui-form-label">搜索：</label>
          <div class="layui-input-inline">
            <input type="text" name="search1" value="{$search['search1']}" placeholder="手机号搜索" autocomplete="off" class="layui-input" style="padding-right: 24px;">
            <!-- <i class="layui-icon layui-icon-search" style="position: absolute;right: 5px;top: 11px;color: #999;"></i> -->
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">线索等级：</label>
          <div class="layui-input-inline">
            <select name="search3" id="">
              <option value="">选择线索等级</option>
              {loop $culeLevels as $culeLevel}
              <option value="{$culeLevel->id}" {if $search['search3'] == $culeLevel->id}selected{/if}>{$culeLevel->name}</option>
              {/loop}
            </select>
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">企业标签：</label>
          <div class="layui-input-inline">
            <select name="search4" id="">
              <option value=""></option>
                {loop $etTagArr as $keyTag => $etTag}
                <option value="{$keyTag}" {if $search['search4'] == $keyTag}selected{/if}>{$etTag}</option>
                {/loop}
            </select>
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">添加时间：</label>
          <div class="layui-input-inline">
            <input type="text" class="layui-input" value="{$search['addTime']}" name="addTime" id="addTime" placeholder="开始日期 ~ 结束日期" autocomplete="off">
          </div>
        </div>

        <div class="layui-inline">
          <label class="layui-form-label"></label>
          <div class="layui-input-inline">
            <a class="layui-btn layui-btn-normal" lay-submit lay-filter="searchFrom">查询</a>
            <a class="layui-btn layui-btn-primary reset">重置</a>
          </div>
        </div>

      </form>
      <!-- table -->
      <div class="client-container" style="margin:10px 0;">
        <div class="flex align-items-center" style="padding: 20px 30px;">
          <div class="flex-1">
            <strong>共{count($clueLists)}个客户</strong>
            <span class="layui-breadcrumb" lay-separator="|" style="margin-left: 20px;">
            </span>
          </div>
          <div>
            <button type="button" class="layui-btn layui-btn-normal add-tag">添加标签</button>
            <button type="button" class="layui-btn layui-btn-normal allocation-user">批量分配</button>
            <button type="button" class="layui-btn layui-btn-normal move-sea">移至公海</button>
            <button type="button" class="layui-btn layui-btn-normal delete-clue">删除线索</button>
          </div>
        </div>
        <div class="mcheckbox-table">
          <table class="layui-table" lay-data="!{id:'testTable',page:!{limit:10}}" lay-filter="clientTable" lay-skin="line">
            <thead>
              <tr>
                <th lay-data="!{checkbox:true,field:'id'}"></th>
                <th lay-data="!{field:'mobile_phone'}">手机</th>
                <th lay-data="!{field:'remark'}">备注名</th>
                <th lay-data="!{field:'level_id'}">线索等级</th>
                <th lay-data="!{field:'status'}">线索状态</th>
                <th lay-data="!{field:'user_id'}">跟进人</th>
                <th lay-data="!{field:'time'}">跟进记录总数</th>
                <th lay-data="!{field:'tags'}">标签</th>
                <th lay-data="!{field:'allocation_num'}">分配次数</th>
                <th lay-data="!{field:'ctime'}">录入时间</th>
                <th lay-data="!{field:'operate'}">操作</th>
              </tr> 
            </thead>
            <tbody>
              {loop $clueLists as $clue}
              <tr>
                <td class="panel-table-value">{$clue->id}</td>
                <td>{$clue->mobile_phone}</td>
                <td>昵称：{$clue->remark}</td>
                <td>{$h->get_mobcule_level_by_id($clue->level_id)['name']}</td>
                <td>{$status_arr[$clue->status]}</td>
                <td>{$clue->user_id?$h->get_user_by_id($clue->wid,$clue->user_id)['name']:'-'}</td>
                <td>
                  <a href="clue_detail.html?id={$clue->id}" class="table-public-btn">查看详情({$clue->total_dynamic})</a>
                </td>
                <td>
                   {loop $clue->tags as $tag}
                    {if $etTagArr[$tag]}
                     <span class="table-public-label"> {$etTagArr[$tag]}&nbsp;</span>
                    {/if}
                  {/loop}
                </td>
                <td>{$clue->allocation_num}</td>
                <td>{date('Y-m-d H:i:s',$clue->ctime)}</td>
                <td>
                  <a href="clue_detail.html?id={$clue->id}" class="table-public-btn">线索详情</a>
<!--                   <a href="javascript:;" class="table-public-btn" onclick="">添加跟进</a> -->
                  <!-- <a href="javascript:;" class="table-public-btn" onclick="">编辑</a> -->
                  <a href="javascript:;" class="table-public-btn" onclick="allocation_user({$clue->id})">分配线索</a>
                  <a href="javascript:;" class="table-public-btn" onclick="clue_add_tag({$clue->id})">添加标签</a>
                  <a href="javascript:;" class="table-public-btn" onclick="clue_move_sea({$clue->id})">移至公海</a>
                  <!-- <a href="javascript:;" class="table-public-btn" onclick="">合并客户</a> -->
                  <a href="javascript:;" class="table-public-btn" onclick="delete_clue({$clue->id})">删除线索</a>
                </td>
              </tr>
              {/loop}
            </tbody>
          </table>
        </div>
        <!-- <div class="main-container-h pageing-container-h">
        <div class="pageing-content-h">
             <span>{$p->totalnum}条/{$p->totalpage}页</span> 
         </div>
          <ul class="pageing-content-h">
                 {P weidogsadmin}
          </ul>
       </div>
      </div> -->
    </div>
    <!-- <div class="layui-tab-item">内容2</div> -->
  </div>
  <div class="layui-form" id="updateDiv" style="display: none;padding: 30px;" >
    <form id="updateClue" class="layui-form">
      <input type="hidden" name="clueIdArr" id="clueIdArr" value="">
      <input type="hidden" name="updateClueType" id="updateClueType" value="1">
      <div class="">
        <div class="move-sea-div" style="">
          <h2 class="" style="text-align: center; font-size: 20px; font-weight: bold; padding-bottom: 20px;"> 移至公海 </h2>
          <div class="layui-form-item">
              <label class="layui-form-label">选择公海:</label>
              <div class="layui-input-block">
                <select name="moveSeaId" id="moveSeaId" value="">
                  <option value=""></option>
                  {loop $seas as $sea}
                  <option value="{$sea->id}">{$sea->name}</option>
                  {/loop}
                </select>
              </div>
          </div>
        </div>
        <div class="allocation-clue-div" style="display: none;">
          <h2 class="" style="text-align: center; font-size: 20px; font-weight: bold; padding-bottom: 20px;"> 批量分配线索 </h2>
          <div class="layui-form-item">
              <label class="layui-form-label">选择员工:</label>
              <div class="layui-input-block">
                <span class="layui-btn layui-btn-primary" id="addPeople">+ 前往添加</span>
              </div>
              <input type="hidden" name="checkUser" id="checkUser"/>
              <div id="checkUserCon"></div>
          </div>
        </div>
        <div class="clue-add-tag-div" style="display: none;">
          <h2 class="" style="text-align: center; font-size: 20px; font-weight: bold; padding-bottom: 20px;"> 批量打标签 </h2>
          <div class="layui-form-item">
              <lable class="layui-form-label">选择标签:</lable>
              <div class="layui-input-block select-tag" style="">
                <input type="hidden" name="addTag" id="addTag" value="">
                <input type="text" value="" id="checkLable" readonly placeholder="请选择标签" autocomplete="off" class="layui-input">
            </div>
          </div>
        </div>
        <div class="" style="display: flex; justify-content: flex-end;">
          <button id="" type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="parent.layer.closeAll()" style=""> 取消</button>
          <a id="" type="button" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit lay-filter="updateClue" style=""> 确定</a>
        </div>
      </div>
    </form>
  </div>

  <script src="/js/jquery.min.js"></script>
  <script src="/cusmanage/js/layui.all.js"></script>
  <script src="/cusmanage/js/formSelects-v4.min.js"></script>
  <script src="/cusmanage/js/common.js"></script>
  <script src="/js/ajax.js"></script>
  <script type="text/javascript">
    $('.add-clue').on('click',function(){
      layer.open({
        title: ['新建线索', 'font-weight:bold;'],
        type: 2,
        area: ['1050px', '650px'],
        shade: 0.2,
        shadeClose: true,
        content: 'add_clue.html'
      })
    })

    layui.use('form', function(){
      var form = layui.form;

      form.on('submit(updateClue)',function(data){
        if(data.field.updateClueType == '1' && data.field.moveSeaId == ''){
          layer.msg('请选择公海'); return;
        }
        if(data.field.updateClueType == '2' && data.field.checkUser == ''){
          layer.msg('请选择员工'); return;
        }
        if(data.field.updateClueType == '3' && data.field.addTag == ''){
          layer.msg('请选择至少一个标签'); return;
        }
        var formDataUpdateClue = $('#updateClue').serialize();
        myAjaxPost(false, true, 'clue_update.html', formDataUpdateClue, function (resp) {
            console.log(resp);
          if (resp.status == 'success') {
            layer.msg(resp.msg);
            setTimeout(function(){
              //parent.layer.closeAll('iframe');
              location.reload();
            },500);
          }else{
            layer.msg(resp.msg);
          }
        });
      })

      form.on('submit(searchFrom)',function(data){
        var searchFrom = $('#searchFrom').serialize();
        location.href = "sea_clue.html?seaId={$seaId}&"+searchFrom;
      })

      $("a.reset").click(function(){
          // $("#orderSelect")[0].reset();
          var reset = false;
        $("#searchFrom").find('input[type=text],select').each(function() {
          console.log($(this).val());
          if($(this).val()){
            reset = true;
          }
            $(this).val('');
          });
        form.render();
        if(reset){
          var searchFrom = $('#searchFrom').serialize();
          location.href = "sea_clue.html?seaId={$seaId}&"+searchFrom;
        }
        return;
      })
    })
  </script>
<script>
    var selectedClients = {}
    function getPageSelected() {
      var arr = layui.table.checkStatus('testTable').data
      var result = []
      for (var i = 0, l = arr.length; i < l; i++) {
        result.push(JSON.parse(arr[i].id))
      }
      return result
    }
    var currTablePage = 1, tableSelected = [] // 以页码为key，result为value


    layui.use('table', function(){
      var table = layui.table;
      //转换静态表格
      table.init('clientTable', {
        page: !{limit: 1},
        // 页码变化会触发
        done: function(res, curr, count) {
          console.log('当前页码: ' + curr)
          currTablePage = curr
          // $('.mcheckbox-table td .layui-form-checked').click() // 如需翻页清除选中项
        }
      })
      table.on('checkbox(clientTable)', function(obj){
        var result = getPageSelected();
        tableSelected[currTablePage] = result
        // console.log(obj.checked); //当前是否选中状态
        // console.log(obj.data); //选中行的相关数据
        // console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
      })
    })
    function get_select_clue_id(){
      var result = getPageSelected();
      console.log(tableSelected);
      // return;
      if(tableSelected.length == 0){
        return '';
      }
      var clue_id = tableSelected.reduce(function (a, b) { return a.concat(b)} );
      if (clue_id.length == 0 ) {
        return '';
      }
      return clue_id.toString();
    }
    //批量添加标签
    $(".add-tag").on('click',function(){
        var clueid_arr = get_select_clue_id();
        console.log(clueid_arr);
        if(clueid_arr == ''){
          layer.msg('请至少选择一条线索');
          return ;
        }
        clue_add_tag(clueid_arr);
    })
    function clue_add_tag(id){
      $("#updateClueType").val('3');
      $("#clueIdArr").val(id);
      $(".move-sea-div").hide();
      $(".allocation-clue-div").hide();
      $(".clue-add-tag-div").show();
      layer.open({
        title: [' ', 'font-weight:bold;'],
        type: 1,
        area: ['700px', 'auto'],
        shadeClose: true,
        content: $('#updateDiv')
      })
    }
    $('#checkLable').on('click',function(){
      layer.open({
        type: 2,
        title: '请选择标签',
        shadeClose: true,
        shade: 0.2,
        area: ['700px', '530px'],
        content: 'select_tag.html'
      }); 
    })
    //分配线索
    $(".allocation-user").on('click',function(){
        var clueid_arr = get_select_clue_id();
        console.log(clueid_arr);
        if(clueid_arr == ''){
          layer.msg('请至少选择一条线索');
          return ;
        }
        allocation_user(clueid_arr);
    })
    $('#addPeople').on('click',function(){
      layer.open({
        type: 2,
        title: '请选择使用人员',
        shadeClose: true,
        shade: 0.2,
        area: ['700px', '530px'],
        content: 'select_user.html'
      }); 
    })
    function allocation_user(id){
      $("#updateClueType").val('2');
      $("#clueIdArr").val(id);
      $(".move-sea-div").hide();
      $(".allocation-clue-div").show();
      $(".clue-add-tag-div").hide();
      layer.open({
        title: [' ', 'font-weight:bold;'],
        type: 1,
        area: ['700px', '300px'],
        shadeClose: true,
        content: $('#updateDiv')
      })
    }
    //将线索移至到公海
    $(".move-sea").on('click',function(){
        var clueid_arr = get_select_clue_id();
        console.log(clueid_arr);

        if(clueid_arr == ''){
          layer.msg('请至少选择一条线索');
          return ;
        }

        clue_move_sea(clueid_arr);
    })
    function clue_move_sea(id){
      $("#updateClueType").val('1');
      $("#clueIdArr").val(id);
      $(".move-sea-div").show();
      $(".allocation-clue-div").hide();
      $(".clue-add-tag-div").hide();
      layer.open({
        title: [' ', 'font-weight:bold;'],
        type: 1,
        area: ['700px', '250px'],
        shadeClose: true,
        content: $('#updateDiv')
      })
    }
    //删除线索
    $(".delete-clue").on('click',function(){
        var clueid_arr = get_select_clue_id();
        console.log(clueid_arr);
        if(clueid_arr == ''){
          layer.msg('请至少选择一条线索');
          return ;
        }
        delete_clue(clueid_arr);
    })
    function delete_clue(id){
      layer.confirm('确定要删除该线索吗？', { icon: 7, title:'提示'}, function(index) {
        myAjaxPost(false, true, 'delete_clue.html', { id:id}, function (resp) {
          if (resp.status == 'success') {
            tusi(resp.msg);
            setTimeout(function(){
              //parent.layer.closeAll('iframe');
              location.reload();
            },500);
          }else{
              tusi(resp.msg);
          }
        });
        layer.close(index);
      });
    }

    $('.add-tags').on('click', function() {
      if (!Object.keys(selectedClients).length) {
        layer.msg('请先选择线索')
      } else {
        layer.open({
          title: ['批量打标签', 'font-weight:bold;'],
          type: 1,
          area: '600px',
          shadeClose: true,
          content: $('#batchTagPanel')
        })
      }
    })

    $(document).on('click', '.tags-panel-item', function() {
      if ($(this).hasClass('disabled')) return;
      $(this).toggleClass('on')
    })

    layui.use('laydate', function(){
      var laydate = layui.laydate;

      //日期范围
      laydate.render({ elem: '#addTime' ,range: true })
    })
</script>

</body>
</html>